<template>
  <el-upload
    action="0"
    :on-remove="handleRemove"
    :file-list="fileList"
    :accept="accept"
    :limit="limit"
    :before-upload="beforeUpload"
    :list-type="listType"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip" v-if="type=='image'">只能上传jpg/png文件，且不超过5M</div>
    <div slot="tip" class="el-upload__tip" v-else>文件不能超过5M</div>
  </el-upload>
</template>
<script>
import http from "../../../assets/js/http.js";
export default {
  props: {
    type: { type: String, default: "image" },
    value: String,
    limit: {type:Number , default:1}
  },
  watch: {
    value(val) {
      this.mValue = val ? val : "";
      let urls = this.mValue.split(",");
      if (this.fileList.length != urls.length) {
        this.initData();
      }
    }
  },
  computed: {
    accept() {
      return this.type == "image" ? "image/*" : "";
    },
    listType() {
      return this.type == "image" ? "picture-card" : "";
    }
  },
  created() {
    this.initData();
  },
  data() {
    return {
      mValue : this.value,
      fileList: []
    };
  },
  //  :on-preview="handlePreview"
  methods: {
    initData() {
      this.mValue = this.value ? this.value : "";
      if(!this.mValue) return;
      let urls = this.mValue.split(",");
      let index = 1;
      this.fileList = [];
      urls.forEach(url => {
        let pos = url.lastIndexOf(".");
        let ext = "",
          preUrl = "";
        if (pos > 0) {
          ext = url.substring(pos + 1);
          preUrl = url.substring(0, pos);
        } else {
          preUrl = url;
        }

        this.fileList.push({
          name: "文件" + index,
          url: HOST + preUrl + "_thumbnail.jpg",
          sourceUrl: url
        });
        index++;
      });
    },
    beforeUpload(file) {
      this.apiPostForm("file/upload", { file: file, type: this.type }).then(
        resp => {
          if (resp.data) {
            let len = this.fileList.length;
            resp.data.forEach(item => {
              let pos = item.url.lastIndexOf(".");
              let ext = "",
                preUrl = "";
              if (pos > 0) {
                ext = item.url.substring(pos + 1);
                preUrl = item.url.substring(0, pos);
              } else {
                preUrl = item.url;
              }

              this.fileList.push({
                name: "文件" + ++len,
                url: HOST + preUrl + "_thumbnail.jpg",
                sourceUrl: item.url
              });
              this.$emit("input", _.map(this.fileList, "sourceUrl").join(","));
            });
          }
        }
      );
      return false;
    },
    handleRemove(file, fileList) {
      let urls = _.map(fileList, "sourceUrl").join(",");
      this.$emit("input", urls);
      this.$nextTick(() => {
        if (fileList.length == 0) {
          this.fileList = [];
        }
      });
    }
  },
  mixins: [http]
};
</script>
<style scoped>

</style>
